<template>
  <view class="swiper_cell">
    <swiper
      class="swiper"
      @change="currentChange"
      circular
      :indicator-dots="false"
      :autoplay="true"
    >
      <swiper-item @click="toBanner('2')" v-for="item of list" :key="item.imgUrl">
        <image
          :src="item.imgUrl"
          class="img"
        />
      </swiper-item>
    </swiper>
    <view class="dot_cell">
      <view
        v-for="(item, index) in list"
        class="dot"
        :key="item.imgUrl"
        :class="{ active: index === currentIndex }"
      ></view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";
import { http } from "@/utils/http";
import { getHomeBanner } from "@/api/home";
import { onLoad } from "@dcloudio/uni-app";
import type { bannerItem } from "@/types/home";
 
let props = defineProps({
  list: {
    type: Array<bannerItem>,
    default: [],
  }
})

let currentIndex = ref(0);

// 轮播改变
const currentChange = (e: any) => {
  currentIndex.value = e.detail.current;
};

// 轮播跳转
const toBanner = (e: any) => {
  uni.navigateTo({ url: "/pages/login/login" });
};
</script>

<style scoped lang="scss">
.swiper_cell {
  height: 320rpx;
  position: relative;
  .img {
    height: 320rpx;
  }
  .dot_cell {
    position: absolute;
    bottom: 10px;
    left: 50%;
    translate: -50% 0;
    display: flex;
    .dot {
      width: 15px;
      height: 2px;
      background-color: white;
      margin: 0 5px;
    }
    .active {
      background-color: #00bf9c;
    }
  }
}
</style>
